<!--
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-08-22 16:30:11
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-23 16:54:59
 * @FilePath: \v3_xmly\src\components\headerTop\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="headerTop">
    <div class="top">
      <a class="logo_icon" href="https://m.ximalaya.com"> 喜马拉雅 </a>
      <div class="top_search" @click="goSearch">
        <div class="top_search_img">
          <svg
            t="1692672379823"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5154"
            width="16"
            height="16"
          >
            <path
              d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
              p-id="5155"
              fill="#8a8a8a"
            ></path>
          </svg>
        </div>
        <div class="top_search_text">搜索</div>
      </div>
      <div class="top_right">打开app</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
// 前往搜索页
const goSearch = () => {
  router.push({
    name: "Search"
  })
}
</script>

<style scoped lang="less">
@allColor: #f86442;
.headerTop {
  .top {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 15px 5px;
    // border: 1px solid pink;
    height: 50px;
    .logo_icon {
      width: 70px;
      text-decoration: none;
      color: @allColor;
      font-weight: bold;
      font-size: 17px;
    }
    .top_search {
      display: flex;
      align-items: center;
      background-color: #eff1f4;
      margin: 0 10px;
      // margin-left: 0;
      height: 100%;
      border-radius: 50px;
      flex: 1;
      // border: 1px solid blue;
      .top_search_img {
        margin: 0 10px;
      }
      .top_search_text {
        font-size: 12px;
        color: #b3b3b4;
      }
    }
    .top_right {
      padding: 6px 0;
      text-align: center;
      width: 66px;
      font-size: 12px;
      border: 1px solid @allColor;
      border-radius: 50px;
      color: @allColor;
    }
  }
}
</style>
